<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息表录入</title>
    <link rel="stylesheet" href="../练习项目/css/bootstrap.min.css">
    <style>
        /* 样式初始化 */
        * {
            padding: 0;
            margin: 0;
        }

        input {
            border: 1px solid #d3e5fe;
            outline: none;
            margin-right: 20px;
            text-indent: 10px;
        }

        select {
            margin-right: 20px;
        }

        .job {
            margin-top: 50px;
        }

        /* 版心start */
        .w {
            width: 1200px;
            text-align: center;
            margin: 0 auto;
        }

        /* 版心end */


        .bigbox {
            height: 2000px;
        }

        /* 标题start */
        h1 {
            display: inline-block;
            margin-top: 100px;
        }

        /* 标题end */


        /* <!-- 信息录入模块start --> */
        .message_input {
            margin-top: 50px;
        }

        .message_input input[name="student"] {
            width: 120px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input input[name="age"] {
            width: 60px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input select[name="sex"] {
            width: 80px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input input[name="salary"] {
            width: 120px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input select[name="address"] {
            width: 60px;
            height: 26px;
            border-radius: 10px;
        }

        .message_input button {
            width: 60px;
            height: 26px;
            border-radius: 10px;
            background-color: #174086;
            color: #fff;
            cursor: pointer;
        }

        /* <!-- 信息录入模块end --> */


        /* 就业表格start */
        table {
            margin: 40px auto;
            width: 1000px;
        }

        th {
            background-color: #d3e5fe;
        }

        table,
        tr,
        th,
        td {
            border: 1px solid gainsboro;
            border-collapse: collapse;
            height: 50px;
        }

        .bi-patch-plus {
            vertical-align: middle;
        }


        /* 就业表格end */
    </style>
</head>

<body>
    <!-- HTML模块 -->
    <div class="bigbox w">
        <!-- 新增学员 -->
        <h1>新增学员</h1>

        <!-- 信息录入模块 -->
        <div class="message_input">
            <form class="info">
                姓名： <input type="text" name="student">
                年龄： <input type="text " name="age">
                性别：<select name="sex" id="">
                    <option selected="selected">男</option>
                    <option>女</option>
                </select>
                薪资：<input type="text" name="salary">
                地址：<select name="address" id="">
                    <option selected="selected" value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广东">广东</option>
                    <option value="浙江">浙江</option>
                    <option value="南昌">南昌</option>
                    <option value="江西">江西</option>
                    <option value="厦门">厦门</option>
                    <option value="赣州">赣州</option>
                    <option value="兴国">兴国</option>
                </select>
                <button>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-patch-plus" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 .5-.5z" />
                        <path
                            d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z" />
                    </svg>
                    录入
                </button>
        </div>
        </form>


        <!-- 就业榜表格模块 -->
        <h1 class="job">就业榜</h1>

        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>薪资</th>
                    <th>就业城市</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>


    <!-- js模块 -->
    <script>
        // 获取元素
        const student = document.querySelector('input[name=student]')
        const age = document.querySelector('input[name=age]')
        const sex = document.querySelector('select[name=sex]')
        const salary = document.querySelector('input[name=salary]')
        const address = document.querySelector('select[name=address]')
        const button = document.querySelector('button')
        const tbody = document.querySelector('table tbody')
        const info = document.querySelector('.message_input .info')

        console.log(info);
        console.log(age);
        console.log(sex);
        // 定义一个数组用来装输入的数据
        const arr = []

        // 添加提交事件
        // （注意是给表单添加）
        info.addEventListener('submit', function (e) {
            // 提交表单阻止刷新将输入的数据添加到数组中（重点细节）
            e.preventDefault()
            const obj = {
                stuId: arr.length + 1,
                student: student.value,
                age: age.value,
                sex: sex.value,
                salary: salary.value,
                address: address.value
            }
            if (obj.student === '' || obj.age === '' || obj.salary === '') {
                alert('请输入完整信息')
            }
            else {
                arr.push(obj)
                //  .reset()为清空表格元素
                this.reset()
                romance()
            }
        })

        // 定义一个生成新表格的函数
        function romance() {
            // 每次执行前先删除前面的表在重新打印以免重复打印
            tbody.innerHTML = ''
            // 给删除添加id自定义属性便于后面用委托事件找到当前删除的元素位置
            // a标签给后面添加委托事件提供了便利
            for (let i = 0; i < arr.length; i++) {
                const tr = document.createElement('tr')
                tr.innerHTML = `
                        <td>${arr[i].stuId}</td>
                        <td>${arr[i].student}</td>
                        <td>${arr[i].age}</td>
                        <td>${arr[i].sex}</td>
                        <td>${arr[i].salary}</td>
                        <td>${arr[i].address}</td>
                        <td data-id="${i}"><a href="#">删除</a></td> `
                tbody.appendChild(tr)
            }
        }

        // 删除模块思路是删除数组里的数据不是删出dom节点
        // 元素太多我们利用事件委托的方法比较合适
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName = 'A') {
                // 得到当前点击删除元素的id号e.target.dataset.id
                arr.splice(e.target.dataset.id, 1)
                // 重新渲染
                romance()
            }
        }
        )
    </script>
</body>

</html>